<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			li {
				list-style: none;
			}
			.tp-promo {
				position: relative;
				width: 520px;
				height: 280px;
				background-color: pink;
				margin: 100px auto;
			}
			.prev, 
			.next {
				position: absolute;
				/*绝对定位的盒子垂直居中*/
				top: 50%;
				margin-top: -15px;
				/*加了绝对定位的盒子可以直接设置高度和宽度*/
				width: 20px;
				height: 30px;
				background: rgba(0,0,0,0.3);
				text-align: center;
				line-height: 30px;
				color: #FFFFFF;
				text-decoration: none;
				
			}
			.prev {
				left: 0px;
				/*圆角边框*/
				border-radius:0 15px 15px 0 ;
				}
				.next {
				right: 0;
				/*圆角边框*/
				border-radius:15px 0 0 15px ;
				}
				.promo-nav {
					position: absolute;
					bottom: 15px;
					left: 50%;
					margin-left: -35px;
					width: 70px;
					height: 13px;
					/*background-color: pink;*/
					background: rgba(255,255,255,0.3);
					border-radius: 7px;
				}
				.promo-nav li {
					float: left;
					width: 8px;
					height: 8px;
					background-color: #FFFFFF;
					border-radius: 50%;
					margin: 3px;
				}
				/*不要忘记权重问题*/
				.promo-nav .selected {
					background-color: #ff5000;
				}
		</style>
	</head>
	<body>
		<div class="tp-promo">
			<img src="img/tp.jpg"/>
			<!--左侧按钮箭头-->
			<a href="#" class="prev">&lt;</a>
			<!--右侧按钮箭头-->
			<a href="#" class="next">&gt;</a>
			<ul class="promo-nav">
				<li class="selected"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
